<template>
	<div class="Head_and_tail"
		v-loading="saveUploading.status"
		:element-loading-text="saveUploading.txt"
		v-loading.fullscreen.lock="saveUploading.full">
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<div class="publishFrom_up">
					<el-form-item label="设置片头">
						<updater-image-dom :picture="ruleForm.imageUrlHead" :options="uploadOptionsImg" @imgListen="getheadimg"></updater-image-dom>
					</el-form-item>
					<el-form-item label="设置片尾">
						<updater-image-dom :picture="ruleForm.imageUrlTail" :options="uploadOptionsImg" @imgListen="gettailimg"></updater-image-dom>
					</el-form-item>
				</div>
				<div class="publishFrom_if publishFrom_if2 clear">
					<el-form-item label="设置时长" class="publishFrom_if_l fl">
						<span>
							<el-input-number 
								v-model="ruleForm.startTime" 
								controls-position="right" 
								:min="1" :max="10">
							</el-input-number>
                            <span style="position: absolute;bottom: 0;right: 45px;">S</span>
						</span>
					</el-form-item>
					<!--  -->
					<el-form-item label="设置时长" class="publishFrom_if_l fr">
						<span>
							<el-input-number 
								v-model="ruleForm.endTime" 
								controls-position="right" 
								:min="1" :max="10">
							</el-input-number>
                            <span style="position: absolute;bottom: 0;right: 45px;">S</span>
						</span>
					</el-form-item>
				</div>
				<el-form-item>					
					<el-button @click="resetForm('ruleForm')">取消</el-button>
					<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
				</el-form-item>
			</el-form>
	</div>
</template>

<script>
    import updaterImageDom from '@/components/common/uploader-image';
    
	export default {
		props : ['compParam','activeIndex'],
		name: '',
		data() {
			return {
				thisIndex:'5',
				time1: '00:00:00 - 00:30:00',
				time2: '00:00:00 - 00:30:00',
				saveUploading:{
					status: false ,
					txt:"正在保存...",
					full:false
				},
				ruleForm: {
					endTime: 0, //结束时间
					startTime: 0, //开始时间
					imageUrlHead:'', //
					imageUrlTail: '', //
				},
				isActive: false,
				selectFileOrNotImgHead: false, //是否选中文件
				selectFileOrNotImgTail: false, //是否选中文件
				attrsImg: {
				    accept: ['image/*']
				},
				uploadOptionsImg: {
				    target: this.BASE_URL + "/api/resource/res_upload",
				    testChunks: false,
				    headers: { 
				    	Authorization: `Bearer ` + this.$g.access_token,
				    }
				},
				initHeadTailData:null,
			}
		},
	    mounted(){
	     	this.initFunc();
	    },
	    watch:{
			'activeIndex':{
	    		handler(n){
	    			if( n === this.thisIndex ){
	    				this.initFunc();
	    			}
	    		},
	    		
	    	},
	    },
		methods: {
			initFunc(){
				this.getHeadTail();
			},
			getHeadTail(){
				let success = (data => {
					this.initHeadTailData = null;
                    this.initHeadTailData = data.data;
                    
					this.ruleForm = {
						endTime: data.data.tail_time > 0 ? data.data.tail_time: 3, //结束时间
						startTime:  data.data.title_time > 0 ? data.data.title_time: 3, //开始时间
						imageUrlHead: data.data.title ? data.data.title : '',
						imageUrlTail: data.data.tail ? data.data.tail : ''
					}
                })
                
				this.$ajax.get('api/video/trailer',{params:{video_id:this.compParam.id},func:{success:success}})
			},
			saveHeadTail(){
				if (this.ruleForm.imageUrlHead == '' && this.ruleForm.imageUrlTail == '') {
					this.saveUploading.status = false;
					this.saveUploading.full = false;
					this.$message.warning('请先上传图片');
					return false;
				}

				let success = (data => {
					this.saveUploading.status = false;
					this.saveUploading.full = false;
					this.$message.success(data.msg);
					this.$emit('changeIndexx' );
				})
				let fail = (data => {
					this.$message.error(data.msg)
					this.saveUploading.status = false;
					this.saveUploading.full = false;
					this.initFunc();
				})
				let params  = {
					video_id: this.compParam.id,
					head_time : this.ruleForm.startTime,
					head_path : this.ruleForm.imageUrlHead,
					tail_time : this.ruleForm.endTime,
					tail_path : this.ruleForm.imageUrlTail,
				}

				this.$ajax.post('api/video/trailer', params ,{func: {success: success, fail: fail}})
			},
			//表单验证
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
                        let yes = (res => {
                            this.saveUploading.status  = true;
                            this.saveUploading.full = true;
                            this.saveHeadTail();

                            setTimeout(() => {
                                this.$router.push('/resources/video/video-list');
                            }, 1000);
                        })
                        let cancel = (res => {})
                        this.e_confirm({yes: yes, cancel: cancel, txt: '视频合成所需时间根据视频大小而定，在合成期间视频将不能播放以及无法编辑，确定合成吗？'});
					} else {
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$router.push('/resources/video/video-list');
			},
			getheadimg(mess) {
                this.ruleForm.imageUrlHead = mess ? mess.file_path : '';

                if (mess === '' && this.initHeadTailData.title !== '') {
                    let success = (res => {
                        this.getHeadTail();
                    })
                    let params = {
                        video_id: this.compParam.id,
                        type: 'title'
                    }
                    let fail = (res => {})

                    this.$ajax.delete('api/video/trailer', {params: params, func: {success: success, fail: fail}});
                }
			},
			gettailimg(mess) {
                this.ruleForm.imageUrlTail = mess ? mess.file_path : '';
                
                if (mess === '' && this.initHeadTailData.tail !== '') {
                    let success = (res => {
                        this.getHeadTail();
                    })
                    let params = {
                        video_id: this.compParam.id,
                        type: 'tail'
                    }
                    let fail = (res => {})

                    this.$ajax.delete('api/video/trailer', {params: params, func: {success: success, fail: fail}});
                }
			}
		},
		components: {
			updaterImageDom
		}
	}
</script>


<style lang="scss">



.Head_and_tail{
	.publishFrom_if2{
		margin: 40px 0;
	}
	.publishFrom{
		max-width: 800px;
	}	
	.publishFrom_{
		width: 240px;
		height: 135px;
		border: 1px solid #E0E0E0;
		position: relative;

		.avatar-uploader{
			height: 100%;
		}
		.el-upload--text{
			width: 100%;
			height: 100%;
		}
		.uploader{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(255,255,255,.1);
		}
		.el-icon-error{
			position: absolute;
			right: 5px;
			top: 5px;
		}
		.uploader-btn {
			display: block;
			position: relative;
			padding: 0;
			font-size: 100%;
			border: 0;
			    // background: none;
			    height: 100%;
			    line-height: 134px;
			    text-align: center;
			    &:hover{
			    	// background:$bg_5;
			    }
			}
		}
		.publishFrom_b{
			text-align: center;
			>i{
				margin: 20px 0;
			}
			>p{
				font-size: 12px;
				color: #666;
				line-height: 19px;
			}
			
		}

		.publishFrom{
			margin-top: 30px;
			.el-table{
				th{
					border: 0;
					background: #EFEFEF;
				}
			}
			.el-input__inner,
			.el-textarea__inner,
			.is-disabled+span.el-checkbox__label{
				color: #000 !important;
			}
			.el-checkbox+.el-checkbox{
				margin: 0;

			}
			.el-checkbox-group >label{
				margin-right: 20px !important;
			}

		}

		.publishFrom_up{
			text-align: center;
			text-align-last: justify;
			>div{
				text-align-last: initial;
				text-align: left;
				display: inline-block;
				vertical-align: top;
			}
		}
		
		.publishFrom_seleck{
			text-align: center;
			text-align-last: justify;
			>.el-form-item{
				text-align: left;
				text-align-last: initial;
				display: inline-block;
				vertical-align: top;
			}

		}

		.numberWord{
			position: absolute;
			bottom: 5px;
			right: 15px;
			color: #666;
			line-height: 19px;
			>i{
				color: #000;
			}
		}

		.information{
			background: #EFF6FF;
			padding: 25px 45px 20px;
			margin-bottom: 40px;
		}

		.information_l{
			>span{
				text-align: center;
				display: inline-block;
				vertical-align: top;
				margin-right: 60px;
				>p{
					color: #888;
					line-height: 16px;
					margin-top: 10px;
				}
				&:last-of-type{
					margin-right: 0;
				}
			}
		}

		.information_r{
			>p{
				font-size: 12px;
				color: #666666;
				text-align: right;
				>strong{
					font-size: 36px;
					color: #E1733A;
					line-height: 46px;
				}
				&:first-of-type{
					margin-bottom: 30px;
				}
			}
		}
		.buttonCSS{
			text-align: center;
			button{
				width: 80px;
				height: 30px;
				text-align: center;
				padding: 0;
				border: 0;
			}
			.is-plain{
				color: #6A7FBC;
			}
		}

		.keyword{
			max-width: 220px !important;
		}

		.keywordBox{
			.el-tag{
				margin-right: 10px;
				border: 0;
				background-color: rgb(239, 246, 255);
				border-radius: 0;
			}
		}


		.uploaderList{
			position: fixed !important;
			width: 100%;
			height: 100%;
			top:0 !important;;
			left:0;
			background: rgba(0,0,0,.5)!important;
			z-index: 9;
			opacity: 1;
			ul{
				position: relative;
				top:300px;
				bottom: 0;
				left: 0;
				right: 0;
				width: 50%;
				margin: auto !important;
				background:#eee;
				>li{
					position: relative;
				}
			}
		}
		.uploader-file-info {
			position: unset !important;
			z-index: initial !important;
		}

}

	
</style>